<!DOCTYPE <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>picture test</title>
</head>

<body>

    <p>肖生克的救赎（静态图片）：</p>
    <img src="肖生克的救赎.jpg" alt="肖生克的救赎" width=“311” height="463">

    <p>肖生克的救赎（动态图片）：</p>
    <img src="save.gif" alt="save" width="500" height="255">

    <p>图片无法显示的时，以图片名字显示</p>
    <img src="0" alt="无法打开的图片">

    <p>来自网页的图像：</p>
    <img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">

    <p><img src="smiley.gif" alt="Smilet face" style="float:left" width="32" height="32"><img src="smiley.gif" alt="Smilet face"
            style="float:right" width="32" height="32">利用 float 属性浮动图片</p>

    <p>通过点击图片跳转到百度百科词条（鼠标指向图片时会有链接说明）：</p><a href="https://baike.baidu.com/item/肖申克的救赎/30307?fr=aladdin/"><img src="save.gif"
            title="肖生克的救赎百度百科词条" width="500" height="255"></a>

    <p>点击字母“R”可以跳转菜鸟教程，点击字母“B”可以跳转百度</p>
    <img src="http://www.runoob.com/images/logo.png" alt="runoob_logo" width="336" height="69" usemap="#runoob_logo">
    <map name="runoob_logo">
        <area shape="rect" coords="0,0,32,69" alt="runoob.com" href="http://www.runoob.com/">
        <area shape="rect" coords="176,0,208,69" alt="baidu.com" href="http://www.baidu.com/">
    </map>

</body>

</html>